<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>用户管理</cite></a>
    <a><cite>用户列表</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_user_search" id="filterForm">
        <script type="text/html" template lay-done="layui.data.done()">
          <div class="layui-inline">
            <div class="layui-form-label">关键字搜索</div>
            <div class="layui-input-inline">
              <input type="text" name="keyword" value="{{decodeURIComponent(layui.router().search.keyword || '')}}"
                     class="layui-input"
                     placeholder="请输入用户昵称或手机号">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">注册日期</div>
            <div class="layui-inline" id="date_range">
              <div class="layui-input-inline">
                <input type="text" name="start_date" autocomplete="off" id="start_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.start_date || ''}}" placeholder="开始日期">
              </div>
              <div class="layui-input-inline">~</div>
              <div class="layui-input-inline">
                <input type="text" name="end_date" autocomplete="off" id="end_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.end_date || ''}}" placeholder="结束日期">
              </div>
            </div>
          </div>
          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_user_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_user_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
          </div>
          <button type="submit" lay-submit class="layui-btn layui-btn-normal"
                  lay-filter="user_export">
            <i class="layui-icon layui-icon-export"></i>导出
          </button>
        </script>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_user"></div>
      <script type="text/html" id="tpl_avatar">
        {{# if (d.avatar_url) { }}
        <img style="width: 35px" src="{{d.avatar_url}}" layadmin-event="imagePreview">
        {{# } }}
        {{d.nickname || ''}}
      </script>
      <script type="text/html" id="tpl_from">
        {{#  if (d.channel) { }}
        {{d.channel.name}}
        {{# } }}
      </script>
      <script type="text/html" id="tpl_invitor">
        {{# if (d.parent) { }}
        {{d.parent.mobile}}
        {{# } }}
      </script>
      <script type="text/html" id="tpl_status">
        {{# if (d.punish == 1) { }}
        <span class="layui-font-red">处罚中</span>
        {{# } else { }}
        <span class="layui-font-green">正常</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_real_name">
        {{# if (d.auth) { }}
        {{d.auth.real_name}}
        {{# } else { }}
        <span class="layui-font-red">未实名</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-btn layui-btn-xs" lay-event="more">操作<i class="layui-icon layui-icon-down"></i></a>
      </script>
      <script type="text/html" id="tpl_tool_2">
        {{# if (d.punish == 0) { }}
        <a class="layui-table-link" lay-event="punish">
          处罚
        </a>
        {{# } }}
        {{# if (d.punish == 1) { }}
        <a class="layui-table-link" lay-event="unpunish">
          解除处罚
        </a>
        {{# } }}
      </script>
    </div>
  </div>
</div>

<script>
  layui.data.done = function () {
    layui.use(['fox_table', 'laydate', 'dropdown'], function () {
      let $ = layui.$
        , fox_table = layui.fox_table
        , laydate = layui.laydate
        , layer = layui.layer
        , admin = layui.admin
        , form = layui.form
        , view = layui.view
        , dropdown = layui.dropdown

      //日期时间选择器
      laydate.render({
        elem: '#date_range'
        , range: ['#start_date', '#end_date']
        , max: (new Date()).toDateString()
      });


      let resourceUrl = 'agent-admin/users'
      // 列表查询
      fox_table.render({
        id: 'table_user'
        , url: resourceUrl
        , cols: [[
          {title: 'ID', field: 'id', width: 80, align: "center", sort: true}
          , {title: '手机号', field: 'mobile', width: 120}
          , {title: '头像&昵称', templet: '#tpl_avatar', minWidth: 100}
          , {title: '真实姓名', templet: '#tpl_real_name', width: 100}
          , {title: '渠道', templet: '#tpl_from', width: 180}
          , {title: '邀请人', templet: '#tpl_invitor', width: 180}
          , {title: '注册时间', field: 'created_at', width: 170, align: "center"}
          , {title: '状态', templet: '#tpl_status', width: 80}
          , {title: '操作', width: 100, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
        ]]
      });


      //监听操作栏
      fox_table.toolbar(function (obj) {
        let data = obj.data;
        if (obj.event === 'more') {
          //更多下拉菜单
          let options = [{
            title: '持有资产导出',
            id: 'asset_export'
          }, {
            title: '设置用户来源',
            id: 'source',
          }];
          if (data.auth) {
            options.push({
              title: '查看实名信息',
              id: 'real_name'
            })
          }
          if (data.punish == 0) {
            options.push({
              title: '处罚',
              id: 'punish'
            })
          } else {
            options.push({
              title: '结束处罚',
              id: 'cancel_punish'
            })
          }
          dropdown.render({
            elem: this
            , show: true //外部事件触发即显示
            , data: options
            , click: function (opt, othis) {
              //根据 id 做出不同操作
              if (opt.id === 'punish') {
                showPunishForm(data);
              } else if (opt.id === 'cancel_punish') {
                layer.confirm('惩罚结束时间为[' + data.punish_log.end_time + ']，确认提前解除惩罚?', function (index) {
                  admin.post(resourceUrl + '/' + data.id + '/unpunish_config', {}, function (res) {
                    layer.close(index);
                    fox_table.reload();
                  })
                })
              } else if (opt.id === 'real_name') {
                showRealNameForm(data)
              } else if (opt.id === 'source') {
                showSourceForm(data)
              } else if (opt.id === 'asset_export') {
                admin.post('agent-admin/users/' + data.id + '/asset_export', data.field, function (res) {
                  layer.confirm('数据下载中，请到下载中心查看下载任务进度.', function (index) {
                    layer.close(index);
                    location.hash = '/ops/download';
                    return false;
                  });
                  layer.closeAll('loading');
                })
              }
            }
            , align: 'right' //右对齐弹出（v2.6.8 新增）
            , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
          });
        }

      });

      //惩罚配置
      function showPunishForm(data) {
        let minWidth = '500px';
        let minHeight = '280px';
        admin.popup({
          title: '处罚设置'
          , area: [minWidth, minHeight]
          , id: 'popup_resale_config'
          , success: function (layero, index) {
            view(this.id).render('/user/punish_config', data).done(function () {
              form.on('submit(submit_resale)', function (d) {
                if (d.field.punish_day <= 0) {
                  layer.msg('处罚天数不可小于1')
                  return
                }

                admin.post(resourceUrl + '/' + data.id + '/punish_config', {
                  punish_day: d.field.punish_day
                }, function (res) {
                  layer.close(index);
                  fox_table.reload();
                })
              })
            })
          }
        })
      }

      //搜索
      form.on('submit(submit_user_search)', function (d) {
        fox_table.reload(d.field);
        return false;
      });
      //重置
      form.on('submit(reset_user_search)', function (d) {
        $("input[name='keyword']").val('');
        $("input[name='start_date']").val('');
        $("input[name='end_date']").val('');
        fox_table.reload({});
        return false;
      });

      // 用户导出
      form.on('submit(user_export)', function (data) {
        admin.post('agent-admin/fontendusers/export', data.field, function (res) {
          layer.confirm('数据下载中，请到下载中心查看下载任务.', function (index) {
            layer.close(index);
            location.hash = '/ops/download';
            return false;
          });
          layer.closeAll('loading');
        }, {hasLoading: true})

        return false;
      });

      //查看实名信息
      function showRealNameForm(data) {
        let minWidth = '600px';
        let minHeight = '700px';
        admin.popup({
          title: '实名信息'
          , area: [minWidth, minHeight]
          , id: 'popup_user_real_name'
          , success: function (layero, index) {
            view(this.id).render('/user/real_name', data.auth).done(function () {
            })
          }
        })
      }

      //编辑用户来源
      function showSourceForm(data) {
        let minWidth = '500px';
        let minHeight = '320px';
        admin.popup({
          title: '用户来源'
          , area: [minWidth, minHeight]
          , id: 'popup_user_source'
          , success: function (layero, index) {
            view(this.id).render('/user/source', data).done(function () {
              form.on('submit(submit_user_source)', function (d) {
                admin.post(resourceUrl + '/' + data.id + '/source', d.field, function (res) {
                  layer.close(index);
                  fox_table.reload();
                })
              })
            })
          }
        })
      }
    })
  }
</script>

